
<style type="text/css">
<!--
a, a:visited {
	color: #1272B5;
}
a.tag {
	background-color:#E0EAF1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	corner-radius: 5px;
	border:1px solid #E0EAF1;
	color:#3E6D8E;
	font-size:90%;
	line-height:2.4;
	margin:2px 2px;
	padding:2px 4px;
	text-decoration:none;
	white-space:nowrap;
	font-size: 12px;
}
a.tag:hover {
	text-decoration: none;
	color: #7F9FB6;
}

.add-link-form {
 	margin-right: 5px;
 	margin-bottom: 5px;
 	margin-top: 10px;
}

.link {
	min-height: 40px;
	border-bottom:1px dashed #999;
	display:block;
	padding: 10px 2px;
	margin: 4px 0px;
	margin-right: 5px;
}


.link:hover {
 	background-color:#eee;
	cursor:pointer;
}
 
.taglist {
	text-align:right;
}

.link .atitle {
	margin:0px 0px 2px 0px;
}

.filter {
	color: #bbb;
	font-size:10px;
	border:1px dashed #999;
	margin-right: 5px;
}

.ops {
	color: #bbb;
	font-size:10px;
	text-align:right;
}
.ops a {
	color: #888;
	text-decoration:none;
}

#panel-frame {
	position:relative; 
	max-width:700px; 
	position:fixed;
	
}

.panel { 
	background-color:#f2f2f2; width:340px; height:550px;
	margin-top:20px;
	position:relative;
	position:absolute;
	border:solid 1px #999999;
	border-left:0px;
	left:0;
}

.data {
	font-size:176px;
}
-->
</style>

#{extends 'main.html' /}
#{set 'title'}
	eazyBookmark - ${user}
#{/set}

	<div class="alert-message error" id="error-alert">
  		<a class="close" href="#">&times;</a>
  		<p><strong>${flash.error}!</strong></p>
	</div>
	<div class="alert-message success" id="success-alert">
  			<a class="close" href="#">&times;</a>
  			<p><strong>${flash.success}!</strong></p>
	 </div>
	<script type="text/javascript">
	  #{if flash.error}    	
        	$("#error-alert").alert();
        	$("#success-alert").alert('close');
	   #{/if}
	  #{else}
			#{if flash.success}  			
        		$("#success-alert").alert();
        		$("#error-alert").alert('close');
			#{/if}
			#{else}
				$("#success-alert").alert('close');
				$("#error-alert").alert('close');
			#{/else}	
		#{/else}
		
		
		$(document).ready(function() {
 
  
   			$('.link').click(function() {
   				var id= $(this).attr('id');
   				var data_id= $(".data").html();
    			var panel= $('.panel');
				var panel_width=$('.panel').css('left');
				if(data_id==id) {
					panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});	
				} else {
					if(panel_width=='341px') {
					
					}else {
    					panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
    				
					}			
				}
				
				
				$('.data').html(id);
				
				return false;
	
  });
  
 
  
  $('.close').click(function()  {
    var panel= $('.panel');
    panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
    panel.css('display','none');
	return false;
	
  });
  
  
  
});
	</script>

<div id="add-link-form" class="modal hide fade">
     <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Add bookmark</h3>
            </div>
          	#{form @Profile.addlink(), class:'form-stacked' }	
        		<fieldset>
        			<div class="clearfix">
            			<label for="url-textbox">Link</label>
            			<div class="input">
              				<input class="xlarge" id="url-textbox" name="url" size="30" type="text" />
            			</div>
          			</div><!-- /clearfix -->
          			<div class="clearfix">
            			<label for="url-textbox">Tags,comma separated tag names e.g. news, technical, travel, leisure</label>
          				<div class="input">
              				<input class="xlarge" name="tags" type="text"/>
            			</div>
          			</div><!-- /clearfix -->
          			<div class="actions">
            			<input type="submit" class="btn primary" value="Save changes">
          			</div>
        		</fieldset>
        	#{/form}
			
</div>

		
<div class="row">

	<div class="span9">


 		<h2>Your bookmarks</h2>
 		



 		<div class="add-link-form">
 			<button data-controls-modal="add-link-form" data-backdrop="true" data-keyboard="true" class="btn large primary">Add bookmark</button>
 		</div>
 		
          	

<div class="filter">
#{if tags}
Tags
#{/if}
#{list items:tags, as:'tag'}
<br/>
&nbsp;&nbsp;&nbsp;<a href="@{Profile.index(tag.name)}" class="tag" title="Click to see all links with tag '${tag}'">${tag.name}</a>
#{/list}
</div>

<div id="links">

	#{list items:links, as:'link'}
	
	<div class="link" id="${link.id}">
		
		
		<!-- title -->
		<div class="title">
		
		<img align="left" src="http://www.google.com/s2/favicons?domain=${link.url.domain()}" width="16px" height="16px" border="0"/>
		
		#{if link.title}
		
		&nbsp;<a href="${link.url}">${link.title}</a></span>
		<p style="color:#00B306;margin:3px 0px;font-size:90%">${link.url.domain()}</p>
		#{/if}
		#{else}
		
		&nbsp;<span class="alink"><a href="${link.url}">${link.url}</a></span>
		#{/else}
		</div>
		
		
		
		<!-- Description -->
		<div class="description">
		<p style="margin:3px 0px;">${link.description}</p>
		</div>
		
		<!-- Tags -->
		<div class="tags">
			#{list items: link.findTagsByLink(), as: 'tag'}
				<a href="@{Profile.index(tag.name)}" class="tag" title="Click to see all links with tag '${tag}'">${tag}</a>
			#{/list}
		</div>
		
		<!-- Operation -->
		<div class="ops">
		
			<a href="@{Profile.editlink(link.id)}" title="Edit this link">edit</a>
			|
			<a href="@{Profile.removeLink(link.id)}"
				onclick="return confirm('Are you sure you want to remove this link?')"
				title="Remove this link">remove</a></div>	
		</div>
	
	#{/list}
	#{else}
		<p>No links added yet!</p>
	#{/else}
</div>        
          </div>
          
          
          
          
          
           		<div id="panel-frame"> 
<div class="panel"> 
<div class="head"> 
<a href="#" class="close">Close</a> 
</div> 
<div class="data" style="padding:20px"></div> 
</div>
</div>
          
          
          
          
          
          
          
          <div class="span5">
            <h2>Activity</h2>
          </div>
        </div>






<script type="text/javascript">
$(document).ready(function(){

	$("#tags-link").click(function() {

		if($(this).text() == "show") {
			$(this).text("hide");
		} else {
			$(this).text("show");
		}
		$("#tag-form")
			.slideToggle()
			.find("input").focus();
	});

});
</script>